<template>
  <h1 v-if="isShow">{{ newsContent }}</h1>
  <h1 @click="changeNum">{{ num }}</h1>
  <button @click="changeEdit">修改</button>
</template>

<script>
import {ref} from 'vue'

export default {
  name: 'App',

  data() {
    console.log('data')
    return {
      newsContent: '振兴中华',
      isShow: true
    }
  },
  methods: {
    changeEdit() {
      this.newsContent = '1111';
      this.isShow = !this.isShow;
    }
  },
  setup() {
    console.log('setup')
    const num = ref(0);

    function changeNum() {
      console.log(num)
      num.value++
    }

    return {num,changeNum}
  },
  beforeCreate() {
    // 可以在这里发送 请求数据
    console.log('beforeCreate 初始化之前')
  },
  created() {
    // 可以在这里发送 请求数据
    console.log('created 初始化之后')
  },
  beforeMount() {
    console.log('beforeMount 挂载之前')
  },
  mounted() {
    // 可以操作一些页面上的内容
    // 修改动态的对象
    console.log('beforeMount 挂载之后')
  },
  beforeUpdate() {
    console.log('beforeUpdate 更新之前')
  },
  updated() {
    console.log('updated 更新之后')
  }

}
</script>

<style>
.active {
  /*width: 100px;*/
  /*height: 100px;*/
  background-color: yellowgreen;
}

#d2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>